<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>copy one</title>
  <script type="text/javascript" src="./js/phaser.js"></script>
  <script type="text/javascript" src="./js/intro/index.js"></script>
</head>
<body>
  <div id="game"></div>
</body>
<script type="text/javascript">
var ParentSprite = function() {
    Phaser.Sprite.call(this, game, 0, 0)
}
;
ParentSprite.prototype = Object.create(Phaser.Sprite.prototype),
ParentSprite.prototype.constructor = ParentSprite,
ParentSprite.prototype.update = function() {
    for (var t = this.children.length; t--; )
        this.children[t].update()
}

function createViewWindow() {
  var viewWindow = new ParentSprite();
  game.add.existing(viewWindow);
  
  var s = (game.width) / 622;
  var w = Math.round(622 * s); //i know its the same as game.width ;)
  var h = Math.round(193 * s);
  viewWindow.scale.set(s, s);

  viewWindow.y = Math.round(game.height / 2 - (h / 2));


  var mask = game.add.graphics(0, 0);
  mask.beginFill(0x000000);
  mask.drawRect(0, 0, w, h);
  mask.endFill();
  mask.x = viewWindow.x;
  mask.y = viewWindow.y;
  mask.fixedToCamera = true;
  viewWindow.mask = mask;


  var frameGraphics = game.add.graphics(0, 0);    
  frameGraphics.lineStyle(2, 0xffffff, 1);


  
  //frameGraphics.drawRect(0, 0, FrauenVsRefugees.VIEW_WIDTH, FrauenVsRefugees.VIEW_HEIGHT);
  frameGraphics.moveTo(0,0);
  frameGraphics.lineTo(w, 0);
  frameGraphics.moveTo(0, h - 1);
  frameGraphics.lineTo(w, h - 1);
  frameGraphics.fixedToCamera = true;
  frameGraphics.cameraOffset.x = viewWindow.x;
  frameGraphics.cameraOffset.y = viewWindow.y;

  viewWindow.filterArea = new Phaser.Rectangle(mask.x, mask.y, w, h);

  return viewWindow;
}
  var game = new Phaser.Game(800, 600, Phaser.CANVAS, "game");

  game.state.add('Boot', FrauenVsRefugees.Boot);
  game.state.start('Boot');


</script>
</html>